<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Train Notes</title>
    <style>
    .noteshead {
            width: 92%;
            margin: 0 auto;
            padding: 30px;
            background-color: #74bccb;
            display: flex;
            justify-content: space-around;
            border-radius: 20px 20px 0 0;
            /* 按照左上角、右上角、右下角、左下角的顺序设置圆角半径 */
        }

        .noteshead div {
            font-weight: bold;
            color: #fff;
            font-size: 20px;

        }

        .notesitem {
    width: 92%;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    justify-content: space-between; /* 修改为 space-between 以确保间隔均匀 */
    text-align: center;
}

.tablemain {
    width: 92%;
    margin: 0 auto;
    
}
.tablehead {
    background-color: #74bccb;
}
div {
            font-weight: bold;
            color: #fff;
            font-size: 20px;

        }


        @media (min-width: 1000px) {
            /* 屏幕宽度小于600px时，应用以下样式 */

            .noteshead {
                width: 90%;
            }
            .notesitem {
                width: 90%;
            }
        }
    </style>
</head>
<body>
<table class="tablemain">
    <thead class="tablehead" >
      <tr>
        <th>时 期</th>
        <th>项 目</th>
        <th>时 长</th>
      </tr>
    </thead>
    <tbody>
     <!-- 表格主体内容 -->
      <tr>
        <td>2021.09.01</td>
        <td>项目26563523658655333333333333333333333333333333000000000033333333333333853</td>
        <td>2小时</td>
      </tr>
      
    </tbody>
  </table>


</body>

</html>

<!-- <body></body>
    <div class="noteshead">
        <div>时 期</div>
        <div>项 目</div>
        <div>时 长</div>
    </div>
    <div class="notesitem">
        <div >2021.09.01</div>
        <div>项目26563523658655333333333333333333333333333333000000000000000000000000000000000033333333333333853</div>
        <div>2小时</div>
        <el-divider />
    </div> -->